@import '@/styles/variables.scss';

<template>
  <div class="page-container feedback-container">
    <feedback-header />
    <div class="feedback-content">
      <feedback-form />
      <feedback-tips />
    </div>
  </div>
</template>

<script setup>
import FeedbackHeader from './components/FeedbackHeader.vue'
import FeedbackForm from './components/FeedbackForm.vue'
import FeedbackTips from './components/FeedbackTips.vue'
</script>

<style lang="scss" scoped>
.feedback-container {
  position: relative;
  padding: $spacing-extra-large 0;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 200px;
    @include gradient-background($primary-color, 22%);
    z-index: 0;
  }
  
  .feedback-content {
    position: relative;
    z-index: 1;
    
    :deep(.el-card) {
      background: $background-color-lighter;
      border: none;
      border-radius: $border-radius-large;
      box-shadow: $box-shadow-base;
      transition: $transition-base;
      
      &:hover {
        transform: translateY(-5px);
        box-shadow: $box-shadow-dark;
      }
    }
    
    :deep(.el-alert) {
      margin-top: $spacing-extra-large;
      border-radius: $border-radius-base;
      border: 1px solid $border-color-light;
      
      .el-alert__title {
        font-size: $font-size-medium;
        font-weight: 500;
      }
      
      p {
        color: $text-regular;
        line-height: 1.6;
        margin: $spacing-base 0;
      }
    }
  }
  
  @media (max-width: $breakpoint-md) {
    .feedback-content {
      padding: 0 $spacing-base;
    }
  }
}
</style>
